import React from 'react';
import { getSimpleEmployeeList } from '@/services/attendance/overtime';
import { Select, Spin } from 'antd';

const SelectEmployee = ({ getChildByOrganizationCode, ...restProps }) => {
    const [data, setData] = React.useState([]);
    const [loading, setLoading] = React.useState(false);

    const fetchData = async () => {
        setLoading(true);
        const { code, data: resData = [] } = await getSimpleEmployeeList({ getChildByOrganizationCode });
        if (code === 10000) {
            setData(resData);
        }
        setLoading(false);
    };

    React.useEffect(() => {
        fetchData();
    }, []);

    const renderOptions = () =>
        data.map(item => (
            <Select.Option key={item.employeeCode} value={item.employeeCode} label={item.employeeName}>
                {item.employeeName}
            </Select.Option>
        ));

    return (
        <Spin spinning={loading}>
            <Select
                mode="multiple"
                {...restProps}
                optionFilterProp="label"
                style={{ height: loading ? '35px' : 'auto' }}
            >
                {renderOptions()}
            </Select>
        </Spin>
    );
};

export default React.memo(SelectEmployee);
